<template>
  <div class="myBanck px-[12px] rounded bg-[#2f4553] py-[8px]">
    <el-form
      label-position="top"
      label-width="auto"
      :model="formLabelAlign"
      :rules="rules"
      ref="fromInput"
    >
      <div v-if="showWalletInput" class="pwd">
        <el-form-item
          :label="$t('layer.wallet.Withdrawalpassword')"
          prop="conInputValues"
        >
          <el-input
            v-model="formLabelAlign.conInputValues"
            maxlength="4"
            type="password"
          />
        </el-form-item>

        <el-form-item
          :label="$t('layer.wallet.Withdrawalpassword')"
          prop="inputValues"
        >
          <el-input
            v-model="formLabelAlign.inputValues"
            maxlength="4"
            type="password"
          />
        </el-form-item>
        <div class="pc_pwd"></div>
      </div>
      <div v-else>
        <el-form-item :label="$t('layer.wallet.bankname')" prop="bankName">
          <el-select
            v-model="formLabelAlign.bankName"
            placeholder=""
            style="width: 100%"
            popper-class="mySelectStyle"
            v-if="setWallet.banckDetails?.bank_list?.length"
          >
            <el-option
              v-for="(item, index) in setWallet.banckDetails?.bank_list"
              :label="item.provider_name + ':' + item.bank_name"
              :value="item.bank_code"
              :key="item.bank_code"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('layer.wallet.cardnumber')"
          prop="bankAccountNumber"
        >
          <el-input v-model="formLabelAlign.bankAccountNumber" maxlength="30" />
        </el-form-item>
        <el-form-item
          :label="$t('layer.wallet.accountname')"
          prop="accountName"
        >
          <el-input v-model="formLabelAlign.accountName" maxlength="20" />
        </el-form-item>
      </div>
    </el-form>

    <div class="flex justify-center mt-8">
      <button class="bg-[#1475e1] w-full rounded p-[8px]" @click="submitFrom">
        {{ $t("layer.wallet.confirm") }}
      </button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import { mainWallet } from "@/store/wallet.js";
import { useI18n } from "vue-i18n";
import {
  onlineDeposit,
  offlineDeposit,
  addBankcard,
  removeBankcard,
  bankcardList,
  withdrawSetPsw,
  withdrawPost
} from "../../api/wallet.js";
import { ElNotification } from "element-plus";
import { mainAct } from "@/store/activeda";
import { PasswordInput, NumberKeyboard } from "vant";

const stateInfo = mainAct();
const { t } = useI18n();
const setWallet = mainWallet();
const itemLabelPosition = ref("");
const formLabelAlign = reactive({
  bankName: "",
  bankAccountNumber: "",
  accountName: "",
  conInputValues: "",
  inputValues: ""
});
const rules = reactive({
  // page.setting.Enter
  bankName: [
    {
      required: true,
      message: `${t("layer.wallet.PleaseSelect")}${t("layer.wallet.bankname")}`,
      trigger: "blur"
    }
  ],
  bankAccountNumber: [
    {
      required: true,
      message: `${t("page.setting.Enter")}${t("layer.wallet.cardnumber")}`,
      trigger: "blur"
    }
  ],
  accountName: [
    {
      required: true,
      message: `${t("page.setting.Enter")}${t("layer.wallet.accountname")}`,
      trigger: "blur"
    }
  ],
  conInputValues: [
    {
      required: true,
      message: `${t("page.setting.Enter")}${t(
        "layer.wallet.Withdrawalpassword"
      )}`,
      trigger: ["blur", "change", "focus"],
      min: 4,
      max: 4
    }
  ],
  inputValues: [
    {
      required: true,
      message: `${t("page.setting.Enter")}${t(
        "layer.wallet.Withdrawalpassword"
      )}`,
      trigger: ["blur", "change", "focus"],
      min: 4,
      max: 4
    },
    {
      validator: (rule, value, callback) => {
        const conInputValues = formLabelAlign.conInputValues; // 假设form是包含conInputValues的响应式对象
        if (value !== conInputValues) {
          callback(new Error(`${t("layer.wallet.inconsistent")}`));
        } else {
          callback();
        }
      },
      trigger: ["blur", "change", "focus"]
    }
  ]
});

const inputValues = ref(Array(4).fill("")); // 存储每个输入框的值
const conPasswordInputs = ref([]);
const conInputValues = ref(Array(4).fill("")); // 存储确认密码的输入框值
const phoneWalletPwdOne = ref("");
const phoneWalletPwdValue = ref("");

const showKeyboardOne = ref(true);
const showKeyboard = ref(true);

const fromInput = ref();
const emit = defineEmits(["showMoney"]);
// 提交表单
const submitFrom = async () => {
  await fromInput.value.validate((valid, fields) => {
    if (valid) {
      // 设置提现密码
      if (showWalletInput.value) {
        let data = {
          password: formLabelAlign.conInputValues,
          password_confirm: formLabelAlign.inputValues
          // ticket: ticket.value // 假设 ticket 已经定义
        };

        withdrawSetPsw(data).then((res: any) => {
          if (res.errno == 0) {
            stateInfo.user_detail.payment_password_set = 1;
            ElNotification({
              position: "top-left",
              zIndex: 1015,
              message: t("layer.wallet.operationSuccessful"),
              type: "success"
            });
            showWalletInput.value = false;
            formLabelAlign.inputValues = "";
            formLabelAlign.inputValues = "";

            emit("showMoney", false);
          }
        });
      } else {
        // 添加银行卡
        let data = {
          // password,
          holder_name: formLabelAlign.accountName,
          bank_card_number: formLabelAlign.bankAccountNumber,
          bank_code: formLabelAlign.bankName
        };
        addBankcard(data).then((res: any) => {
          console.log(res);
          if (res.errno == 0) {
            formLabelAlign.bankName = "";
            formLabelAlign.bankAccountNumber = "";
            formLabelAlign.accountName = "";
            ElNotification({
              position: "top-left",
              zIndex: 1015,
              message: t("layer.wallet.operationSuccessful"),
              type: "success"
            });
          }
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

const showWalletInput = ref(false); // 未设置支付密码时显示
onMounted(() => {
  console.log(
    "stateInfo.user_detail?.payment_password_set",
    stateInfo.user_detail?.payment_password_set
  );

  if (!stateInfo.user_detail?.payment_password_set) {
    showWalletInput.value = true;
  }
});
</script>

<style lang="scss" scoped>
:deep(.el-form-item__label) {
  color: #f2f3f4;
}
:deep(.el-input__wrapper) {
  background: #1f2937;
  box-shadow: none;
}
:deep(.el-select__wrapper) {
  background: #1f2937;
  box-shadow: none;
}
:deep(.el-input__inner) {
  color: #f2f3f4;
}
:deep(.el-select__placeholder) {
  color: #f2f3f4;
}
:deep(.van-password-input) {
  width: 100%;
}
:deep(.van-password-input__security li) {
  color: #fff;
  background: none;
}
.van-number-keyboard {
  background: #1a2c38 !important;
}
:deep(.van-key) {
  color: #fff;
  background: #2f4553;
}
:deep(.van-password-input__security i) {
  color: #fff !important;
  background: #fff;
}

@media screen and (min-width: 1024px) {
  .pc_pwd {
    display: block;
  }
  .phone_input {
    display: none;
  }
}
@media screen and (max-width: 1024px) {
  .phone_input {
    display: block;
  }
  .pc_pwd {
    display: none;
  }
}
.pwd :deep(.el-input__inner) {
  color: #f2f3f4;
  letter-spacing: 60px;
}
:deep(.el-form--label-top .el-form-item) {
  margin-bottom: 32px;
}
:deep(.el-select-dropdown__list) {
  background: #1f2937 !important;
}

//下拉框的链接小方块
.el-select-dropdown__item.is-active {
  background: #1f2937 !important;
}

//下拉框的背景色
:deep(.el-select-dropdown__item) {
  background: #1f2937 !important;
}
</style>

<style lang="less">
.el-select__wrapper {
  border: 1px solid #426073;
  box-shadow: none !important;
}
//下拉框的背景色
.el-select-dropdown__item {
  background: #1f2937 !important;
}

//下拉框的链接小方块
.el-select-dropdown__item.is-active {
  background: #1f2937 !important;
}

//鼠标移动上去的选中色
.el-select-dropdown__item.hover,
//下拉框背景色
.el-popper.is-light.mySelectStyle {
  background-color: #1f2937 !important;
  border: 1px solid #426073 !important;
}

//下拉框的链接小方块
.mySelectStyle.el-popper[data-popper-placement^="bottom"]
  .el-popper__arrow::before {
  background: #1f2937 !important;
  border-top: 1px solid #426073 !important;
}

.el-tag.el-tag--info {
  color: #fff;
  background: #1a2c38 !important;
}
.el-icon .el-tag__close {
  color: #fff !important;
}
.mySelectStyle.el-popper[data-popper-placement^="top"]
  .el-popper__arrow::before {
  background: #1f2937 !important;
  border: 1px solid #1f2937 !important;
}

//鼠标移动上去的选中色
.mySelectStyle {
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    color: #fff !important;
    background: #1475e1 !important;
  }

  //下拉框的文本颜色
  .el-select-dropdown__item {
    color: #8e97a6;
  }

  //选中之后的颜色
  .el-select-dropdown__item.selected {
    color: #fff !important;
    background: #2a77c6 !important;
  }
}
</style>
